<template>
  <div class="container">
    <el-card class="mian">
      <!-- 筛选区域 -->
      <Filtrates ref="filtrate">
        <el-button slot="topButton" type="success" icon="el-icon-edit" @click="routePath">新增试题</el-button>
        <el-button slot="fromFooter" size="small" @click="closeBtn">清除</el-button>
        <el-button slot="fromFooter" type="primary" size="small" @click="searchBtn">搜索</el-button>
        <span slot="footer">{{ tableData.counts }}</span>
      </Filtrates>
      <!-- 筛选区域 -->
      <!-- 列表区域 -->
      <el-table :data="tableData.items" style="width: 100%; bottom: 20xpx">
        <el-table-column type="设置类型" label="试题编号" prop="number" />
        <el-table-column label="学科" prop="subject" />
        <el-table-column label="目录" prop="catalog" />
        <el-table-column label="题型" prop="tags" />
        <el-table-column label="题干" width="250px" prop="question">
          <template v-slot="{ row }">
            <span v-html="row.question" />
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180px" prop="addDate">
          <template v-slot="{ row }">{{ row.addDate | parseTime }}</template>
        </el-table-column>
        <el-table-column label="难度" prop="difficulty">
          <template slot-scope="{ row }">
            <div>{{ row.difficulty | filterDifficulty }}</div>
          </template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator" />
        <el-table-column v-slot="{ row }" label="操作" width="220px">
          <el-button type="primary" plain icon="el-icon-view" circle @click="previewBtn(row)" />
          <el-button type="success" plain icon="el-icon-edit" circle @click="routePath(row)" />
          <el-button type="danger" plain icon="el-icon-delete" circle @click="filtrateDelete(0, row)" />
          <el-button type="warning" plain icon="el-icon-check" circle @click="filtrateDelete(1, row)" />
        </el-table-column>
        <!-- <el-table-column
prop="渲染绑定的表数据tableDate中的哪个数据"
                       label="显示名字"
        width="180"/>-->
      </el-table>
      <!-- 列表区域 -->
      <!-- 分页区域 -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :current-page="page"
          :page-sizes="[5, 10, 15]"
          :page-size="pagesize"
          :page="page"
          :total="counts"
          @size-change="changeSize"
          @current-change="changeCurrent"
          @prev-click="clickPrev"
          @next-click="clickNext"
        />
      </el-row>
      <!-- 分页区域 -->
    </el-card>
    <!-- 添加功能 -->
    <!-- 添加功能 -->
    <!-- 预览功能 -->
    <FiltratePreview ref="preview" :show-preview="showPreview" :detail-data="detailData" :show-video-anwser="showVideoAnwser">
      <el-radio-group v-if="detailData.questionType == 1" slot="preoptions" v-model="isRight">
        <div v-for="item in detailData.options" :key="item.id">
          <el-radio :label="item.isRight">{{ item.title }}</el-radio>
        </div>
      </el-radio-group>
      <el-checkbox-group v-else-if="detailData.questionType == 2" slot="preoptions" v-model="checklist">
        <div v-for="item in detailData.options" :key="item.id">
          <el-checkbox :label="item.title" />
        </div>
      </el-checkbox-group>
      <el-row v-else slot="preoptions" />
      <!-- <el-row
        slot="preoptions"
        v-for="item in detailData.options"
        :key="item.id"
      >-->
    </FiltratePreview>
    <!-- 预览功能 -->
    <!-- 修改功能 -->
    <!-- 修改功能 -->
    <!-- 删除功能 -->

    <FiltrateDialog ref="filtrateDialogRef" :show-dialog="showDialog" :index="index">
      <el-button slot="footer" size="small" @click="closeFiltrateBtn">取消</el-button>
    </FiltrateDialog>

    <!-- 删除功能 -->
    <!-- 加入精选 -->
    <!-- 加入精选 -->
  </div>
</template>

<script>
import Filtrates from '../components/filtrates'
import { list, remove, add, detail } from '@/api/hmmm/questions.js'
import FiltrateDialog from '../components/filtrate-dialog'
import FiltratePreview from '../components/filtrate-preview.vue'
import { parseTime } from '../../utils/index.js'
import { questionType as filquestionType, difficulty } from '@/api/hmmm/constants.js'

export default {
  name: '',
  // 过滤器
  filters: {
    filterDifficulty: function (val) {
      const difficultys = difficulty.filter(t => {
        return t.value === val * 1
      })
      return difficultys[0].label
    },
    parseTime,
    filquestionType: function (val) {
      const type = filquestionType.filter(t => t.value === val * 1)
      return type[0].label
    }
  },
  components: {
    Filtrates,
    FiltrateDialog,
    FiltratePreview
  },
  props: {},
  data() {
    return {
      // 简单题库列表
      tableData: {},
      showDialog: false,
      showPreview: false,
      showVideoAnwser: false,
      user: [],
      index: 1,
      newtableData: {},
      // 获取详细数据
      detailData: {},
      // 分页

      pagesize: null,
      page: null,
      counts: 0,
      // 预览答案
      isRight: 1,
      checklist: []
    }
  },
  created() {
    this.list()
  },
  methods: {
    // 获取简单题库列表
    async list() {
      const { data } = await list({ page: this.page, pagesize: this.pagesize })
      this.tableData = data
      this.pagesize = data.pagesize * 1
      this.page = data.page * 1
      this.counts = data.counts * 1
      this.$message.success('获取成功')
    },
    // 路由跳转
    routePath(row) {
      this.$router.push({ name: 'questions-new', query: { id: row.id } })
    },
    // 清除按钮
    closeBtn() {
      this.$refs.filtrate.formData = {}
    },
    // 搜索信息
    async searchBtn() {
      const data = this.$refs.filtrate.formData
      // console.log(data)
      const newData = {
        page: this.page,
        pagesize: this.pagesize,
        subjectID: data.filtrateSubject,
        difficulty: data.filtrateDifficulty,
        questionType: data.filtrateType,
        tags: data.filtrateLabel,
        province: data.province,
        city: data.city,
        keyword: data.filtrateKeyword,
        remarks: data.filtrateRemarks,
        shortName: data.filtrateAbbreviation,
        direction: data.filtrateDirection,
        creatorID: data.filtrateTypeIn,
        catalogID: data.filtrateDirectory02
      }

      this.newtableData = this.newData
      // 过滤数据
      // eslint-disable-next-line no-undef
      const filterFormData = {}
      for (const key in newData) {
        if (newData[key] || newData[key] === 0) {
          filterFormData[key] = newData[key]
        }
      }
      // 提交
      const newlist = await list(filterFormData)
      console.log(newlist)
      this.tableData = newlist.data
      this.page = newlist.data.page * 1
      console.log(this.page)
      this.pagesize = newlist.data.pagesize * 1
      console.log(this.pagesize)
    },
    // 删除/加入功能
    filtrateDelete(i, row) {
      // 判断是删除还是加入
      this.index = i

      this.user = row
      // 删除

      // 显示弹窗
      this.showDialog = true
    },
    // 实现数据删除
    async deleteOk() {
      await remove(this.user)
      // 取消弹框
      this.closeFiltrateBtn()
      // 更新数据
      this.list()
      // 提示
      this.$message.success('删除成功')
    },
    // 添加到金萱题库
    async addOk() {
      await add(this.user)
      // 取消弹框
      this.closeFiltrateBtn()
      // 更新数据
      this.list()
    },
    // 弹框中的取消
    closeFiltrateBtn() {
      this.showDialog = false
    },
    // 弹出框预览
    async previewBtn(row) {
      this.user = row
      // 获取详细数据
      const { data } = await detail(this.user)
      this.detailData = data
      console.log(this.detailData)
      console.log(data.options)
      data.options.forEach(t => {
        if (t.isRight === 1) {
          this.checklist.push(t.title)
        }
      })
      console.log(this.checklist)

      // console.log(list)
      this.showPreview = true
    },
    // 预览区域
    // 关闭弹框
    closePreview() {
      this.detailData = {}
      this.showVideoAnwser = false
      this.showPreview = false
      this.checklist = []
    },
    // 打开video
    openVideo() {
      this.showVideoAnwser = true
    },

    // 分页区域
    async changeSize(val) {
      this.pagesize = val
      // console.log(val)
      this.page = this.$options.data().page
      // console.log(this.page)
      // 渲染数据
      await this.list({ page: this.page, pagesize: this.pagesize })

      // this.pagesize = this.$options.data().pagesize
    },
    async changeCurrent(val) {
      // this.pagesize = this.$options.data().pagesize
      // console.log(this.pagesize)
      this.page = val
      // console.log(val)
      // 渲染数据
      await this.list({ page: this.page, pagesize: this.pagesize })
      // 修改数据为默认数据
    },
    async clickPrev() {
      this.page--
      // 渲染数据
      await this.list({ page: this.page, pagesize: this.pagesize })
    },
    async clickNext() {
      this.page++
      // 渲染数据
      await this.list({ page: this.page, pagesize: this.pagesize })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 10px;
  .mian {
    background-color: #fff;
  }
}
</style>
